import React, { Component } from 'react'
// import { Icon } from 'antd';
import '../../componentStyle/InputField.scss'
import Bubble from '../common/Bubble';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_9quqssa2phn.js',
// });

export default class InputField extends Component {
    constructor(props) {
        super(props);
        this.state = {
            verifyResult: true,
            tip: "",
            isError: false,
            isShowPassword: this.props.data.isPassword
        }
    }

    handleData = (data) => {
        const value = this.elem.value;
        let temp = {};

        if (!value) {
            this.setState({
                tip: data.nullTip,
                verifyResult: false,
                isError: true
            });
            return;
        }

        if (data.pattern) {
            if (!data.pattern.test(value)) {
                this.setState({
                    tip: data.errorTip,
                    verifyResult: false,
                    isError: true
                });
                return;
            }
        }

        this.setState({
            tip: "",
            verifyResult: true,
            isError: false
        });

        // 创建临时对象，传递数据
        temp.verifyResult = true;
        temp.type = data.type;
        temp.method = data.method;
        temp.value = value;

        this.props.transfornFun(temp);
    }

    handleClick = () => {
        let { isShowPassword } = this.state;
        this.setState({
            isShowPassword: !isShowPassword
        });
    }

    handleShowPasswordIcon = (data) => {
        if (data.isPassword) {
            return <span
                className={`anticon-portal icon ${this.state.isShowPassword ? 'anticonxianshi' : 'anticontubiao-'}`}
                onClick={this.handleClick}
            ></span>
        } else {
            return null;
        }
    }

    render() {
        const { data } = this.props;
        let { verifyResult, tip, isShowPassword } = this.state;
        return (
            <div style={{
                position: 'relative'
            }}>
                <div style={{
                    position: 'absolute',
                    left: -313,
                    top: 0,
                    display: (tip ? 'block' : 'none')
                }}>
                    <Bubble tip={tip} />
                </div>
                <div style={{
                    display: 'flex',
                    width: 350,
                    marginLeft: 25,
                    justifyContent: 'space-between',
                    border: '2px solid white',
                    marginTop: 10,
                    marginBottom: 20,
                    borderRadius: 5,
                    boxShadow: (verifyResult ? 'none' : '0px 0px 3px #f00')
                }}>
                    <div style={{
                        width: 37,
                        height: 40,
                        borderRight: '2px solid white',
                        backgroundColor: '#bbb',
                        borderLeftColor: (verifyResult ? '#fff' : '#f00')
                    }}>
                        <IconFont type={data.icon} style={{
                            fontSize: 20,
                            color: '#fff',
                            marginTop: 9,
                            marginLeft: 8
                        }} />
                    </div>
                    <input
                        type={isShowPassword ? 'password' : 'text'}
                        className='inputField'
                        style={{
                            border: 'none'
                        }}
                        placeholder={data.placeholder}
                        ref={(elem) => (this.elem = elem)}
                        onBlur={() => this.handleData(data)}
                    />
                    {this.handleShowPasswordIcon(data)}
                </div>
            </div>
        )
    }
}
